---
title: Themening
description: Verwendung und Anpassung der Themen
---

# Themening

## Verwendung und Anpassung der Themen

Sie können die RainbowKit-Benutzeroberfläche an Ihr Branding anpassen. Sie können aus einigen vordefinierten Akzentfarben und Rahmenradius-Konfigurationen wählen.

Es gibt 3 eingebaute Themenfunktionen:

- `lightTheme` &nbsp; (Standard)
- `darkTheme`
- `midnightTheme`

Eine Themenfunktion gibt ein Themenobjekt zurück. Sie können das Objekt an die `theme`-Eigenschaft des `RainbowKitProvider` übergeben.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

Wenn Sie möchten, können Sie `accentColor`, `accentColorForeground`, `borderRadius`, `fontStack` und `overlayBlur` übergeben, um sie anzupassen.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider
    theme={darkTheme({
      __accentColor__: '#7b3fe4',
      __accentColorForeground__: 'white',
      __borderRadius__: 'small',
      __fontStack__: 'system',
      __overlayBlur__: 'small',
    })}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```

### Anpassung der integrierten Themen

Die integrierten Themenfunktionen akzeptieren auch ein Optionsobjekt, das die Auswahl mehrerer visueller Stile ermöglicht.

<PropsTable
  data={[
    {
      name: 'accentColor',
      required: false,
      default: '"#0E76FD"',
      type: 'string',
      description:
        'Die Hintergrund-/Schriftfarbe verschiedener interaktiver Elemente.',
    },
    {
      name: 'accentColorForeground',
      required: false,
      default: '"white"',
      type: 'string',
      description:
        'Die Farbe, die für im Vordergrund auf der Akzentfarbe gerenderte Elemente verwendet wird.',
    },
    {
      name: 'borderRadius',
      required: false,
      default: 'large',
      type: '"none" | "small" | "medium" | "large"',
      typeSimple: 'enum',
      description: 'Die Größe der gesamten Rahmenradius-Skala.',
    },
    {
      name: 'fontStack',
      required: false,
      default: 'rounded',
      type: '"rounded" | "system"',
      typeSimple: 'enum',
      description:
        "Der in der gesamten Benutzeroberfläche verwendete Schriftstapel. Beachten Sie, dass `rounded` versucht, SF Pro Rounded zu verwenden und auf Systemschriften zurückgreift, wenn es nicht verfügbar ist.",
    },
    {
      name: 'overlayBlur',
      required: false,
      default: 'none',
      type: '"large" | "small" | "none"',
      typeSimple: 'enum',
      description: 'Die Weichzeichnung des Modalfensterhintergrunds.',
    },
  ]}
/>

Um beispielsweise das Dunkel-Thema mit einer violetten Akzentfarbe und einer `mittleren` Rahmenradius-Skala anzupassen:

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

Jedes Thema bietet auch mehrere Akzentfarb-Voreinstellungen (`blau`, `grün`, `orange`, `rosa`, `violett`, `rot`), die in das Optionsobjekt eingefügt werden können. Um beispielsweise die `rosa` Akzentfarb-Voreinstellung zu verwenden:

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.pink,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### Beispiele

#### Themenfunktion

Hier sind einige verschiedene Möglichkeiten, wie Sie die `theme`-Eigenschaft verwenden können.

Verwenden Sie das `darkTheme`-Thema.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

Verwenden Sie das `midnightTheme`-Thema.

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={midnightTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

#### Akzentfarbe

Hier sind einige verschiedene Möglichkeiten, wie Sie die `accentColor`-Konfiguration verwenden können.

Setzen Sie die Akzentfarbe auf einen benutzerdefinierten violetten Wert.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

Setzen Sie die Akzentfarbe auf die eingebaute `grün`-Voreinstellung.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.green,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Rahmenradius

Hier sind einige verschiedene Möglichkeiten, wie Sie die `borderRadius`-Konfiguration verwenden können.

Setzen Sie den Rahmenradius auf `mittel`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

Setzen Sie den Rahmenradius auf `keinen`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'none',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

> Erinnerung: Die verfügbaren Rahmenradius-Werte sind: `groß` (Standard), `mittel`, `klein` und `keiner`.

#### Schriftstapel

Standardmäßig ist der `fontStack` auf `abgerundet` eingestellt. So können Sie die `fontStack`-Konfiguration verwenden.

Setzen Sie den Schriftstapel auf `System`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Überblendungsunschärfe

Standardmäßig ist die `overlayBlur` auf `keine` eingestellt. So können Sie die `overlayBlur`-Konfiguration verwenden.

Setzen Sie die Überblendungsunschärfe auf `klein`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        overlayBlur: 'small',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Mix und Match

Hier sind einige verschiedene Möglichkeiten, wie Sie verschiedene Themen mit `accentColor`, `borderRadius` und `fontStack`-Eigenschaften kombinieren können.

- Verwenden Sie das `lightTheme`-Thema
- Setzen Sie die Akzentfarbe auf einen benutzerdefinierten violetten Wert
- Setzen Sie den Rahmenradius auf `mittel`
- Setzen Sie den Schriftstapel auf `System`

```tsx
import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={lightTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

- Verwenden Sie das `midnightTheme`-Thema
- Setzen Sie die Akzentfarbe auf die eingebaute `rosa`-Voreinstellung.
- Setzen Sie den Rahmenradius auf `klein`
- Setzen Sie den Schriftstapel auf `System`

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Dunkelmodus-Unterstützung

Wenn Ihre App die standardmäßige `prefers-color-scheme: dark`-Mediabfrage verwendet, um zwischen hellen und dunklen Modi zu wechseln, können Sie optional ein dynamisches Themenobjekt mit `lightMode` und `darkMode` Werten bereitstellen.

```tsx
import {
  RainbowKitProvider,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => (
  <RainbowKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```
